<template>
    <div id="radarChart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.initChart();
        window.addEventListener('resize', this.handleResize);
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('radarChart'));
            if (!this.chart) return

            const areaData = [
                {
                    name: "闯红灯",
                    max: 1000,
                    value: 350,
                },
                {
                    name: "逆行",
                    max: 1000,
                    value: 500,
                },
                {
                    name: "占用机动车道",
                    max: 1000,
                    value: 200,
                },
                {
                    name: "超载",
                    max: 1000,
                    value: 250,
                },
                {
                    name: "未戴安全头盔",
                    max: 1000,
                    value: 500,
                },
                {
                    name: "加装伞具",
                    max: 1000,
                    value: 702,
                },
            ];
            const data = [];
            areaData.forEach((item) => {
                data.push(item.value);
            });
            let maxNum = Math.max(...data);
            function ceilNumber(number) {
                let bite = 0;
                if (number < 10) {
                    return 10;
                }
                while (number >= 10) {
                    number /= 10;
                    bite += 1;
                }
                return Math.ceil(number) * Math.pow(10, bite);
            }
            let allMax = ceilNumber(maxNum);
            areaData.forEach((item) => {
                item.max = allMax;
            });
            const data1 = [0, 0, 0, 0, 0, 0];
            const data2 = [0, 0, 0, 0, 0, 0];
            const data3 = [0, 0, 0, 0, 0, 0];
            const data4 = [0, 0, 0, 0, 0, 0];
            const data5 = [0, 0, 0, 0, 0, 0];
            const data6 = [0, 0, 0, 0, 0, 0];
            data1[0] = data[0];
            data2[1] = data[1];
            data3[2] = data[2];
            data4[3] = data[3];
            data5[4] = data[4];
            data6[5] = data[5];
            const option = {
                backgroundColor: "#0C1121",
                color: ["#2E64FF", "#F0D418", "#FF9B42", "#FF6B6B", "#8E42FF", "#00e4ff"],
                radar: {
                    zlevel: 11,
                    shape: "circle",
                    scale: true,
                    indicator: areaData,
                    center: ["68%", "50%"],
                    radius: "50%",
                    nameGap: "0",
                    startAngle: 90,
                    name: {
                        show: false,
                        color: "red",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(32,126,255, .5)",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(32,126,255, .5)",
                        },
                    },
                    splitArea: {
                        areaStyle: {
                            color: "rgba(32,126,255, 0.1)",
                        },
                    },
                },
                polar: {
                    radius: "50%",
                    center: ['67%', '50%']
                },
                angleAxis: {
                    zlevel: 0,
                    min: 0,
                    max: 360,
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                radiusAxis: {
                    // 位置
                    position: 'right',
                    zlevel: 0,
                    min: 0,
                    max: allMax,
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "rgba(29,208,240,.5)",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: "radar",
                        symbolSize: 12,
                        symbol: "circle",
                        areaStyle: {
                            normal: {
                                color: {
                                    type: "radial",
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(32,126,255, 0.5)", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(32,126,255, 0.1)", // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                        data: [
                            {
                                value: data,
                            },
                            {
                                value: data1,
                                itemStyle: {
                                    color: "#2e64ff",
                                },
                            },
                            {
                                value: data2,
                                itemStyle: {
                                    color: "#f0d418",
                                },
                            },
                            {
                                value: data3,
                                itemStyle: {
                                    color: "#ff9b42",
                                },
                            },
                            {
                                value: data4,
                                itemStyle: {
                                    color: "#ff6b6b",
                                },
                            },
                            {
                                value: data5,
                                itemStyle: {
                                    color: "#8e42ff",
                                },
                            },
                            {
                                value: data6,
                                itemStyle: {
                                    color: "#00e4ff",
                                },
                            },
                            {
                                value: [0, 0, 0, 0, 0, 0],
                                // name: '违章占比',
                                symbolSize: 13,
                            },
                        ],
                        zlevel: 20,
                        z: 4,
                    },
                    {
                        type: "pie",
                        startAngle: 90,
                        clockwise: false, //逆时针
                        data: areaData.map((item) => {
                            return {
                                name: item.name,
                                value: item.value,
                            };
                        }),
                        radius: ["60%", "90%"],
                        zlevel: -1,
                        label: {
                            show: false,
                        },
                        left: '35%',
                    },
                ],
                legend: {
                    data: areaData.map((item) => {
                        return {
                            name: item.name,
                        };
                    }),
                    orient: 'vertical',
                    bottom: 10,
                    left: 5,
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                },
            };
            this.chart.setOption(option);
        }
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
            window.removeEventListener('resize', () => this.chart.resize());
        }
    }
}
</script>

<style scoped>
div {
    width: 100%;
    height: 100%;
}
</style>
